import React, { useState, useEffect } from "react";
import { Select, Form, Button } from "antd"; // 假设你正在使用Ant Design的Select组件
import { CommonModal } from "@/views/components/CommonModal";
import Style from "./index.module.less";
import { SearchSimpleTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";

export const BaseTableModal = ({
	type = "simple",
	children,
	title,
	width,
	height,
	onOk,
	tableHeight,
	footer,
	// ///////////
	tableKey,
	init,
	modalProps = {},
	...resetProps
}) => {
	const originClick = children.props?.onClick;

	const cloneChildren = React.cloneElement(children, {
		onClick: () => {
			originClick && originClick();
			setVisible(true);
		}
	});

	const [visible, setVisible] = useState(false);
	const [form] = Form.useForm();
	const { selectedKeys, selectedRows, dataSource, fetchList, query, searchSimpleTableProps } = useTableConfig({
		tableKey,
		hasPagination: true,
		...resetProps
	});

	useEffect(() => {
		if (visible) {
			// query.type = "";
			init && init();
			fetchList();
		}
	}, [tableKey, visible]);

	const onModalCancel = () => {
		setVisible(false);
	};
	const onModalOk = () => {
		if (onOk && onOk(selectedRows) === false) {
			// 不关闭
			setVisible(true);
		} else {
			setVisible(false);
		}
	};
	return (
		<>
			{cloneChildren}
			<CommonModal
				className="views-table-dialog"
				title={{ title: title }}
				width={width}
				height={height}
				footer={footer}
				visible={visible}
				onOk={onModalOk}
				onCancel={onModalCancel}
				minHeight="100px"
				{...modalProps}
			>
				<div className="views-container" style={{ height: tableHeight }}>
					<SearchSimpleTable type={type} key={tableKey} {...searchSimpleTableProps} />
				</div>
			</CommonModal>
		</>
	);
};
